// import React, { useState, useRef } from 'react';

// const DraggableDiv = ({ setdrawer }) => {
//   const [isDragging, setIsDragging] = useState(false);
//   const [offsetX, setOffsetX] = useState(0);
//   const [offsetY, setOffsetY] = useState(0);
//   const [left, setLeft] = useState(0);
//   const [top, setTop] = useState(0);
//   const dragElementRef = useRef(null);

//   const startDrag = (e) => {
//     e.preventDefault();
//     setIsDragging(true);
//     const rect = dragElementRef.current.getBoundingClientRect();
//     setOffsetX(e.clientX - rect.left);
//     setOffsetY(e.clientY - rect.top);
//   };

//   const drag = (e) => {
//     if (!isDragging) return;
//     const newLeft = e.clientX - offsetX;
//     const newTop = e.clientY - offsetY;
//     setLeft(newLeft);
//     setTop(newTop);
//   };

//   const stopDrag = () => {
//     setIsDragging(false);
//   };

//   return (

//   );
// };

// export default DraggableDiv;

// 引入拖拽插件
import Draggable from 'react-draggable';
import dayjs from 'dayjs';
import React, { useState, useEffect } from 'react';



function getWeek() {
  let datas = dayjs().day()
  let week = ['日', '一', '二', '三', '四', '五', '六']
  return '星期' + week[datas]
}

export default function IndexPage({ setdrawer }) {
  let ifs = false;
  const [dragStartPos, setDragStartPos] = useState({ x: 0, y: 0 });

  const onStart = (e) => {
    setDragStartPos({ x: e.screenX, y: e.screenY });
  };

  const onStop = (e) => {
    const dragX = Math.abs(dragStartPos.x - e.screenX);
    const dragY = Math.abs(dragStartPos.y - e.screenY);
    if (dragX < 5 || dragY < 5) {
      ifs = true;
    } else {
      ifs = false;
    }
  };
  return (
    <Draggable
      bounds={"#container"}
      onStart={onStart}
      onStop={onStop}
    >
      <div
        style={{ width: 56, height: 56, position: "fixed", right: 36, bottom: 36, zIndex: 999999, cursor: "move" }}
      >
        <div className='center' style={{
          flexDirection: "column",
          width: "100%",
          height: "100%",
          position: "absolute",
          left: 0,
          top: 0,
          background: "url(./Calendar.png) no-repeat center",
          backgroundSize: 50
        }}
          onClick={(e) => {
            e.stopPropagation();
            if (!ifs) return;
            setdrawer((s) => ({
              ...s,
              open: true,
              maxWidth: "100vw",
              title: '我的任务',
              placement: 'left',
            }));
          }}>
          <span style={{ color: "#FFF", fontSize: 12, transform: "scale(0.8)" }}>
            {getWeek()}
          </span>
          <span style={{ color: "#FFF", marginTop: -1.5, textShadow: "0 0 2px #ddd" }}>
            {dayjs().format("DD")}
          </span>
        </div>
      </div>
    </Draggable>
  );
}


